<template>
    <view class="box">
        <view v-for="(v,i) in singlePackage" :key="i">
            <view class="box-1">
            <image :src="v.com_image"></image>
            </view>
            <view class="box-2">
                <view class="line1">{{v.com_proName}}</view>
                <view class="line2">{{v.org_name}}</view>
                <view class="line3">
                <view class="line3-1">
                    <text>￥{{v.com_presentPrice}}</text>
                    <text class="oldPrice">￥{{v.com_originalPrice}}</text>
                </view>
                <view class="line3-2">
                    <text class="num">销量 {{v.com_quantity}}</text>
                </view>
                </view>
            </view>
            <view class="box-warp">
                <view class="type-item-spec">
                    <view class="" v-for="(item,index) in tabList"  :key="index" :class="{btna:count == index}" @click="change(index)">
                    <view class="type-name">{{item}}</view>
                    </view>
                </view>
            </view>
            <view class="box-3 box-warp  end-cont" :class="{dis:btnnum == 0}">
                <view class="title">套餐介绍</view>
                <view class="con">{{v.com_introduce}}</view>
                <view class="pic">
                    <image :src="v.com_image"></image>
                </view>
                <view class="title2">使用规则</view>
                <view class="con2">
                    <view>1、请至少提前一天预定；</view>
                    <view>2、线上预约完后，体检日拿身份证到医院前台等级即可开始体检；</view>
                    <view>3、医院提供营养早餐一份；</view>
                </view>
            </view>
            <view class="box-warp box-warp-com end-cont " :class="{dis:btnnum == 1}">
                <view class="box-4">
                    <view><text>项目名称：</text><text>{{v.com_entryName}}</text></view>
                    <view>项目介绍：</view>
                    <view>身高、体重、血压、脉搏、胸部（心脏、双肺、胸腔）、腹部</view>
                </view>
                <view class="box-4">
                <view><text>项目名称：</text><text>一般情况</text></view>
                <view>项目介绍：</view>
                <view>身高、体重、血压、脉搏、胸部（心脏、双肺、胸腔）、腹部</view>
                </view>
                <view class="box-4">
                <view><text>项目名称：</text><text>一般情况</text></view>
                <view>项目介绍：</view>
                <view>身高、体重、血压、脉搏、胸部（心脏、双肺、胸腔）、腹部</view>
                </view>
            </view>
        </view>
        <view class="box-5">
          <view class="title">适用机构</view>
          <scroll-view enable-flex scrollX class="scrollBox">
            <view class="item" v-for="(v,i) in organizationoList" :key="i">
              <image :src='v.org_image'>
              </image>
              <view class="orgName">{{v.org_name}}</view>
              <view class="line"><text>{{v.org_people}}人预约</text><text class="line-1">约5.0千米</text></view>
            </view>
            <!-- <view class="item">
              <image src='https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=567d0263d9c451daf6f60ce386fc52a5/2b138e529822720e415b78c77fcb0a46f31fab5e.jpg'>
              </image>
              <view class="orgName">南方医阿三大苏打实打实的</view>
              <view class="line"><text>120人预约</text><text class="line-1">约5.0千米</text></view>
            </view> -->
            <!--<view class="item">
              <image src='https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=567d0263d9c451daf6f60ce386fc52a5/2b138e529822720e415b78c77fcb0a46f31fab5e.jpg'>
              </image>
              <view>南方医科大学附属第三医院</view>
              <view class="line"><text>120人预约</text><text class="line-1">约5.0千米</text></view>
            </view>
            <view class="item">
              <image src='https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=567d0263d9c451daf6f60ce386fc52a5/2b138e529822720e415b78c77fcb0a46f31fab5e.jpg'>
              </image>
              <view>南方医科大学附属第三医院</view>
              <view class="line"><text>120人预约</text><text class="line-1">约5.0千米</text></view>
            </view>
            <view class="item">
              <image src='https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=567d0263d9c451daf6f60ce386fc52a5/2b138e529822720e415b78c77fcb0a46f31fab5e.jpg'>
              </image>
              <view>南方医科大学附属第三医院</view>
              <view class="line"><text>120人预约</text><text class="line-1">约5.0千米</text></view>
            </view> -->
          </scroll-view>
        </view>
        <view class="box-6">
            <text>￥998</text>
            <text @click="toPay">预约购买</text>
        </view>
    </view>
</template>

<script>
    export default {
        onLoad(option){
            console.log(777,option);
            this.currentId=option.id;
            console.log(777,this.currentId);

            this.$http({
                    url:'/getSingleSet',
                    data:{
                        id:this.currentId
                    },
                    method:"post",
                }).then((res)=>{
                console.log('单个',res.data)
                this.singlePackage=res.data;
                })
        },
        data() {
			return {
				tabList:[ '图文详情','体检项目' ],
                btnnum: 0,
                count: "",
                // 单个套餐的数组
                singlePackage:[],
                //所有的机构数组
                organizationoList:[],
                currentId:''
			}
		},
		methods: {
            //图文和详情的切换
			change(e) {
                console.log(e);
                this.count = e
                this.btnnum = e
            },
            //获取所有的套餐
            // getAllPackages(){
            //     this.$http({
            //         url:'/getAllPackages',
            //     }).then((res)=>{
            //     // console.log(999,res.data);
            //         this.packagesList=res.data
            //         console.log('所有的套餐',this.packagesList);
            //     })
            // },
            //获取所有的机构
            getAllOrganization(){
                this.$http({
                    url:'/getAllOrganization',
                }).then((res)=>{
                    console.log('所有的机构',res.data)
                    this.organizationoList=res.data
                })
            },
            //跳转到付款
            toPay(){
                uni.navigateTo({
                    url: "/pages/PayAdd/PayAdd?id="+this.currentId,
                });
            }
		},
        mounted(){
            //一进页面挂载就执行获取所有套餐的函数
            // this.getAllPackages();
            //获取机构信息
            this.getAllOrganization();
        }
    }
</script>

<style lang="less" scope>
.box{
    margin: 0 13rpx;
    // border: 1rpx solid 是red;

}
.box-1{
    width: 100%;
    // border: 1rpx solid red;

    image{
        width: 100%;
    }
}
.box-2{
    margin-bottom: 50rpx;

    view{
        margin-top: 15rpx;
    }
}
.line1{
    font-size: 50rpx;
}
.line2{
    color:rgb(151, 136, 136);
}
.oldPrice{
    color:rgb(151, 136, 136);
    margin-left: 30rpx;
    text-decoration:line-through;
}
.num{
    color:rgb(151, 136, 136);
    margin-right: 0;
}
.line3{
    display: flex;

    .line3-1{
        flex: 1;
        display: flex;
        justify-content: space-between;
    }

    .line3-2{
        flex: 2;
        text-align: right;
    }
}

.box-3{
    margin-top: 30rpx;
    // border: 1rpx solid red;

    .title{
        font-size: 40rpx;
    }
    .con{
        font-size: 35rpx;
        margin-top: 20rpx;
    }
    .pic{
        width: 100%;
        margin: 20rpx 0;

        image{
            width: 100%;
        }
    }
    .title2{
        font-size: 40rpx;
        margin-bottom: 20rpx;
    }
    .con2{
        font-size: 35rpx;
        margin-bottom: 20rpx;
    }
}
.box-4{
    margin-top: 30rpx;
    padding: 20rpx 0;
    box-shadow: 10rpx 5rpx 5rpx 5rpx #b4b1b1;
    // border: 1rpx solid red;

    view:nth-child(1){
        margin-bottom: 20rpx;
    }
}
.box-5{
    .title{
        margin-top: 50rpx;
        font-size: 40rpx;
    }
    .scrollBox{
        height: 450rpx;
        width: 100%;
        display: flex;
        margin-top: 50rpx;
        flex-wrap: nowrap;

        .item{
            // border: 1rpx solid yellow;
            width: 50%;
            flex-shrink: 0;
            margin-right: 15rpx;
            margin-bottom: 20rpx;
            border-radius: 5%;
            box-shadow: 5rpx 5rpx 5rpx 5rpx #d1c9c9;
            // white-space: wrap;
            // display: inline-block;

            image{
                width: 100%;
                height: 300rpx;
                border-radius: 5% 5% 0 0;
            }

            .orgName{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            view{
                margin-top: 10rpx;
                padding: 0 10rpx;
            }
            .line{
                display: flex;

                text{
                    flex: 1;
                }
                .line-1{
                    text-align: right;
                }
            }
        }
    }
}
.box-6{
    width: 100%;
    height: 100rpx;
    margin-top: 20rpx;
    line-height: 100rpx;
    border-top: 5rpx solid rgb(68, 124, 68);
    display: flex;

    text{
        flex: 1;
        font-size: 50rpx;
        text-align: center;
    }

    text:nth-child(1){
        color: rgb(68, 124, 68);
    }

    text:nth-child(2){
        color: white;
        background: rgb(68, 124, 68);
    }
}



// --- table 框样式---------
.type-item-spec {
        // width: 96%;
        // padding: 15rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 2rpx solid #F0F0F0;
        // border: 1px solid red;
        .type-name {
            flex: 1;
            text-align: center;
            display: inline-block;
            font-size: 50rpx;
            padding-bottom:20rpx ;
        }
    }
    .end-cont {
            display: none;
        }
            .dis {
                display: block;
            }
.btna {
        color: #E80215;
        font-weight: normal;
        
    }
</style>